import React, { useState, useCallback, useEffect } from "react";
import { Button, Divider } from "antd";
const UseCallback: React.FC = (): React.ReactElement => {
  const [height, setHeight] = useState(0);
  const okto = () => {
    setHeight(height + 1);
  };
  const measuredRef = useCallback((node) => {
    if (node !== null) {
      setHeight(node.getBoundingClientRect().height);
    }
  }, []);
  useEffect(() => {
    console.log(height);
  }, [height]);
  return (
    <div>
      <h1>useCallback</h1>
      <h1 ref={measuredRef} onClick={okto}>
        Hello, world 该案例描述useCallback如何获取属性，和修改属性
      </h1>
      <p>The above header is {Math.round(height)}px tall</p>
      <div>
        <Button onClick={okto}>改变</Button>
      </div>
      <Divider>next</Divider>
    </div>
  );
};
export default UseCallback;
